<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <el-button type="success" class="mt-15" plain @click="handleAdd">添加分类</el-button>
    <!-- 表格 -->
    <tableTree
      class="mt-15"
      :treeStructure="true"
      :columns="columns"
      :data-source="dataSource"
      @deleteCate="deleteCategory"
      @editCate="editCategory"
    >
    </tableTree>
    <!-- 分页 -->
    <template>
          <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totallength">
    </el-pagination>
    </template>
    <!-- 编辑框 -->
    <el-dialog title="编辑分类" :visible.sync="editFormVisible">
      <el-form :model="editform" ref="editformref" :rules="rules">
        <el-form-item label="分类名称" :label-width="formLabelWidth" prop="name">
          <el-input v-model="editform.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item >
          <el-button @click="editFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitedit('editformref')">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 添加分类 -->
    <el-dialog title="添加分类" :visible.sync="addFormVisible">
      <el-form :model="addform" :rules="addrules" ref="addformref">
        <el-form-item label="分类名称" :label-width="formLabelWidth" prop="name">
          <el-input v-model="addform.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="父级分类">
          <el-cascader
            :options="dataSource"
            @change="handleChange"
            change-on-select
            :props="props"
            v-model="selectedOptions2">
          </el-cascader>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitadd('addformref')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import tableTree from '@/components/TreeGrid/TreeGrid.vue'
import { getCategories, getCatebyid, delCatebyid, editCatebyid, addCatebyid } from '@/api'
export default {
  components: {
    tableTree
  },
  data () {
    return {
      // 表格树数据
      dataSource: [],
      columns: [{
        text: '分类名称',
        dataIndex: 'cat_name',
        width: ''
      }, {
        text: '是否有效',
        dataIndex: 'cat_deleted',
        width: ''
      }, {
        text: '排序',
        dataIndex: 'cat_level',
        width: ''
      }],
      // 分页数据
      totallength: 0,
      currentPage4: 1,
      pagesize: 10,
      getCate: {
        type: 3,
        pagenum: 1,
        pagesize: 10
      },
      // 编辑表单数据
      editFormVisible: false,
      editform: {
        name: '',
        id: -1
      },
      formLabelWidth: '40',
      rules: {
        name: [{
          required: true, message: '请输入分类名称', trigger: 'blur'
        }]
      },
      // 添加表单数据
      addFormVisible: false,
      addform: {
        name: '',
        id: -1
      },
      addrules: {
        name: [{
          required: true, message: '请输入分类名称', trigger: 'blur'
        }]
      },
      props: {
        value: 'cat_id',
        label: 'cat_name',
        children: 'children'
      },
      addinfo: {
        cat_pid: -1,
        cat_name: '',
        cat_level: -1
      },
      selectedOptions2: []
    }
  },
  created () {
    this.initlist()
  },
  methods: {
    deleteCategory (cid) {
      console.log(cid)
      delCatebyid(cid)
        .then(res => {
          this.initlist()
        })
    },
    // 编辑分类
    editCategory (cid) {
      console.log(cid)
      this.editFormVisible = true
      getCatebyid(cid)
        .then(res => {
          this.editform.name = res.data.cat_name
          this.editform.id = res.data.cat_id
        })
      // this.dataSource.map(item => {
      //   if (item.cat_id === cid) {
      //     this.editform.name = item.cat_name
      //     return false
      //   } else {
      //     if (item.children) {
      //       item.children.map(item => {
      //         if (item.cat_id === cid) {
      //           this.editform.name = item.cat_name
      //           return false
      //         } else {
      //           if (item.children) {
      //             item.children.map(item => {
      //               if (item.cat_id === cid) {
      //                 this.editform.name = item.cat_name
      //                 return false
      //               }
      //             })
      //           }
      //           return false
      //         }
      //       })
      //     }
      //     return false
      //   }
      // })
    },
    handleSizeChange (val) {
      this.getCate.pagesize = val
      this.initlist()
    },
    handleCurrentChange (val) {
      this.getCate.pagenum = val
      this.initlist()
    },
    // 初始化表格数据
    initlist () {
      getCategories(this.getCate)
        .then(res => {
          // console.log(res.data.result)
          this.dataSource = res.data.result
          this.totallength = res.data.total
        })
    },
    // 添加商品
    handleAdd () {
      this.addFormVisible = true
    },
    // 添加提交
    submitadd (refval) {
      this.$refs[refval].validate((valid) => {
        if (valid) {
          this.addinfo.cat_name = this.addform.name
          this.addinfo.cat_pid = this.selectedOptions2[this.selectedOptions2.length - 1]
          if (this.selectedOptions2.length === 0) {
            this.addinfo.cat_level = 0
          } else if (this.selectedOptions2.length === 1) {
            this.addinfo.cat_level = 1
          } else if (this.selectedOptions2.length === 2) {
            this.addinfo.cat_level = 2
          } else {
            this.addinfo.cat_level = 3
          }
          addCatebyid(this.addinfo)
            .then(res => {
              this.addform.name = ''
              this.selectedOptions2 = []
              this.initlist()
              this.addFormVisible = false
            })
        }
      })

      this.addinfo.cat_name = this.addform.name
    },
    // 添加下拉框修改
    handleChange (value) {
      console.log(value)
    },
    // 提交编辑
    submitedit (formName) {
      this.editFormVisible = false
      this.$refs[formName].validate((valid) => {
        if (valid) {
          editCatebyid(this.editform.id, this.editform.name)
            .then(res => {
              console.log(res)
              this.initlist()
            })
          // console.log(formName)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>
